<!-- 选择语言、主题 -->
<template>
  <div class="common-config">
    <!-- 主题选择 -->
    <el-dropdown @command="changeTheme">
      <span class="icon"><i class="echo e-jingzi"></i></span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(item, index) in themeList" :key="index" :command="item.value">
            {{ item.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!-- 语言选择 -->
    <el-dropdown @command="changeLang">
      <span class="icon"><i class="echo e-yuyan"></i></span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(item, index) in langList" :key="index" :command="item.value">
            {{ $t(item.name) }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import themes from '@/assets/themes'
import Storage from '@/assets/js/storage'
import Config from '../assets/js/config'

import useStore from '../store'
const useCommon = useStore.useCommonStore()

// 子组件传值
const emit = defineEmits(['getCurLang'])

// 当前页面语言
const curLang = ref(useCommon.messages[useCommon.locale].el)
// 当前页面主题
const curTheme = ref('')

// 主题列表
const themeList = ref(Config.themeList)
// 语言列表
const langList = ref(Config.langList)

onMounted(() => {
  curTheme.value = Storage.get('curTheme') || 'light'
  changeTheme(curTheme.value)
})

// 切换语言
const changeLang = (command) => {
  // proxy.$i18n.locale = command
  // curLang.value = command
  // Storage.set('lang', command)
  useCommon.setLocale(command)
  curLang.value = useCommon.messages[command].el
  emit('getCurLang', curLang.value)
}

// 切换主题
const changeTheme = (command) => {
  curTheme.value = command
  Storage.session('curTheme', curTheme.value)
  let themeObj = themes[command]
  Object.keys(themeObj).map((item) => {
    document.documentElement.style.setProperty(item, themeObj[item])
  })
}
</script>

<style lang="scss" scoped>
.common-config {
  display: flex;
  gap: 30px;
}
</style>
